<template>
  <div class="powerSystem">
    <el-carousel :autoplay="false" indicator-position="none">
      <el-carousel-item v-for="(item, index) in carouselList" :key="index">
        <Card class="card-item">
          <div slot="header">
            <div class="flex">
              <span>{{ item.label }}</span
              ><el-badge
                is-dot
                :type="item.status == '0' ? 'success' : 'danger'"
              ></el-badge>
            </div>
          </div>
          <div slot="content">
            <div class="contentBox">
              <div class="contentTop">
                <div class="item">
                  <el-badge
                    is-dot
                    :type="item.gas == '0' ? 'success' : 'danger'"
                  ></el-badge>
                  <span>可燃气体</span>
                </div>
                <div class="item">
                  <el-badge
                    is-dot
                    :type="item.fire == '0' ? 'success' : 'danger'"
                  ></el-badge>
                  <span>火灾探测</span>
                </div>
                <div class="item">
                  <el-badge
                    is-dot
                    :type="item.cabin == '0' ? 'success' : 'danger'"
                  ></el-badge>
                  <span>舱室温度</span>
                </div>
              </div>
              <div class="batterySystem">
                <div class="systemHeader">
                  <div class="left">
                    <div class="item">
                      <span class="name">{{ item.name }}</span>
                      <el-badge
                        is-dot
                        :type="item.batteryStatus == '0' ? 'success' : 'danger'"
                      ></el-badge>
                    </div>
                    <div class="item">
                      <span class="sosName">剩余电量：</span>
                      <span>{{ item.sos }}%</span>
                    </div>
                    <div class="item">
                      <span class="sosName"></span>
                      <el-progress
                        style="width: 68px"
                        :text-inside="true"
                        :stroke-width="12"
                        define-back-color="rgba(0,0,0,0)"
                        :percentage="item.surplus"
                        status="success"
                      ></el-progress>
                    </div>
                  </div>

                  <div class="item" v-if="item.batteryStatus=='1'">
                    <div class="detail" @click="seeDetail(item)">
                      查看告警详情>
                    </div>
                  </div>
                </div>
                <div class="batteryBox">
                  <div class="batteryContent">
                    <div class="batterys">
                      <div class="item" v-for="(x, i) in item.data">
                        <div class="itemHeader">
                          <div class="name">{{ x.batteryName }}</div>
                          <div class="batterElectricity">
                            <div
                              class="bg"
                              :class="x.electricity < item.sos ? 'low' : 'high'"
                              :style="{
                                backgroundSize: x.electricity + '% 100%',
                              }"
                            ></div>
                          </div>
                        </div>
                        <div class="itemBody">
                          <div class="itemContent">
                            <div class="label">电池簇电流</div>
                            <div class="value">{{ x.current }}A</div>
                          </div>
                          <div class="itemContent">
                            <div class="label">电池总电压</div>
                            <div class="value">{{ x.voltage }}V</div>
                          </div>
                          <div class="itemContent">
                            <div class="label">最高温度</div>
                            <div class="value">{{ x.electricity }}℃</div>
                          </div>
                          <div class="itemContent">
                            <div class="label">电池簇电量</div>
                            <div class="value">{{ x.current }}%</div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="allBattery">
                    <div class="item">
                      <div class="label">健康度</div>
                      <div class="value">{{ item.allBattery.soc }}%</div>
                    </div>
                    <!-- <div class="item">
                      <div class="label">总电流</div>
                      <div class="value">{{ item.allBattery.current }}A</div>
                    </div> -->
                    <div class="item">
                      <div class="label">单体最高温</div>
                      <div class="value">{{ item.allBattery.maxTem }}℃</div>
                    </div>
                    <div class="item">
                      <div class="label">单体最低温</div>
                      <div class="value">{{ item.allBattery.mminTem }}℃</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </Card>
      </el-carousel-item>
    </el-carousel>
    <el-dialog
      custom-class="powerSystemModal"
      :modal="false"
      :title="title"
      :visible.sync="detailShow"
      width="240px"
    >
      <div class="items">
        <div class="item" v-for="(x, i) in detailData" :key="i">{{ x }}</div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import Card from "./Card.vue";

export default {
  name: "powerSystem",
  components: { Card },
  data() {
    return {
      detailShow: false,
      title: "",
      detailData: [],
      carouselList: [
        {
          // 电池仓的标识名称
          label: "1号电池仓报警",
          // 报警状态，"0"表示无报警
          status: "1",
          // 气体浓度状态，"0"表示正常
          gas: "0",
          // 火灾报警状态，"0"表示无火灾
          fire: "0",
          // 电池仓状态，"0"表示正常
          cabin: "0",
          // 电池系统的名字
          name: "电池系统1",
          // 电池健康状态，"0"表示良好
          batteryStatus: "1",
          // SOS紧急状态，"20%"表示电量的紧急阈值
          sos: 20,
          // 剩余电量，"80%"表示当前电池剩余的电量比例
          surplus: 80,
          // 包含具体电池信息的数组
          allBattery: {
            soc: "100",
            current: "542.0",
            maxTem: "12",
            mminTem: "0",
          },
          data: [
            {
              // 电池的名称或编号
              batteryName: "1",
              // 电池的电流信息
              current: "0",
              // 电池的电压信息
              voltage: "541.0",
              // 电池的温度信息
              temperature: "12",
              // 电池的电量信息
              electricity: "100",
            },
            {
              // 电池的名称或编号
              batteryName: "2",
              // 电池的电流信息
              current: "0",
              // 电池的电压信息
              voltage: "541.0",
              // 电池的温度信息
              temperature: "12",
              // 电池的电量信息
              electricity: "10",
            },
            {
              // 电池的名称或编号
              batteryName: "3",
              // 电池的电流信息
              current: "0",
              // 电池的电压信息
              voltage: "541.0",
              // 电池的温度信息
              temperature: "12",
              // 电池的电量信息
              electricity: "80",
            },
            {
              // 电池的名称或编号
              batteryName: "4",
              // 电池的电流信息
              current: "0",
              // 电池的电压信息
              voltage: "541.0",
              // 电池的温度信息
              temperature: "12",
              // 电池的电量信息
              electricity: "80",
            },
            {
              // 电池的名称或编号
              batteryName: "5",
              // 电池的电流信息
              current: "0",
              // 电池的电压信息
              voltage: "541.0",
              // 电池的温度信息
              temperature: "12",
              // 电池的电量信息
              electricity: "80",
            },
            {
              // 电池的名称或编号
              batteryName: "6",
              // 电池的电流信息
              current: "0",
              // 电池的电压信息
              voltage: "541.0",
              // 电池的温度信息
              temperature: "12",
              // 电池的电量信息
              electricity: "80",
            },
            {
              // 电池的名称或编号
              batteryName: "7",
              // 电池的电流信息
              current: "0",
              // 电池的电压信息
              voltage: "541.0",
              // 电池的温度信息
              temperature: "12",
              // 电池的电量信息
              electricity: "80",
            },
            {
              // 电池的名称或编号
              batteryName: "8",
              // 电池的电流信息
              current: "0",
              // 电池的电压信息
              voltage: "541.0",
              // 电池的温度信息
              temperature: "12",
              // 电池的电量信息
              electricity: "80",
            },
            {
              // 电池的名称或编号
              batteryName: "9",
              // 电池的电流信息
              current: "0",
              // 电池的电压信息
              voltage: "541.0",
              // 电池的温度信息
              temperature: "12",
              // 电池的电量信息
              electricity: "80",
            },
            {
              // 电池的名称或编号
              batteryName: "10",
              // 电池的电流信息
              current: "0",
              // 电池的电压信息
              voltage: "541.0",
              // 电池的温度信息
              temperature: "12",
              // 电池的电量信息
              electricity: "80",
            },
            {
              // 电池的名称或编号
              batteryName: "11",
              // 电池的电流信息
              current: "0",
              // 电池的电压信息
              voltage: "541.0",
              // 电池的温度信息
              temperature: "12",
              // 电池的电量信息
              electricity: "80",
            },
            {
              // 电池的名称或编号
              batteryName: "12",
              // 电池的电流信息
              current: "0",
              // 电池的电压信息
              voltage: "541.0",
              // 电池的温度信息
              temperature: "12",
              // 电池的电量信息
              electricity: "80",
            },
          ],
        },
        {
          // 电池仓的标识名称
          label: "1号电池仓报警",
          // 报警状态，"0"表示无报警
          status: "1",
          // 气体浓度状态，"0"表示正常
          gas: "0",
          // 火灾报警状态，"0"表示无火灾
          fire: "0",
          // 电池仓状态，"0"表示正常
          cabin: "0",
          // 电池系统的名字
          name: "电池系统1",
          // 电池健康状态，"0"表示良好
          batteryStatus: "0",
          // SOS紧急状态，"20%"表示电量的紧急阈值
          sos: 20,
          // 剩余电量，"80%"表示当前电池剩余的电量比例
          surplus: 80,
          // 包含具体电池信息的数组
          allBattery: {
            soc: "100",
            current: "542.0",
            maxTem: "12",
            mminTem: "0",
          },
          data: [
            {
              // 电池的名称或编号
              batteryName: "1",
              // 电池的电流信息
              current: "0",
              // 电池的电压信息
              voltage: "541.0",
              // 电池的温度信息
              temperature: "12",
              // 电池的电量信息
              electricity: "100",
            },
            {
              // 电池的名称或编号
              batteryName: "2",
              // 电池的电流信息
              current: "0",
              // 电池的电压信息
              voltage: "541.0",
              // 电池的温度信息
              temperature: "12",
              // 电池的电量信息
              electricity: "10",
            },
            {
              // 电池的名称或编号
              batteryName: "3",
              // 电池的电流信息
              current: "0",
              // 电池的电压信息
              voltage: "541.0",
              // 电池的温度信息
              temperature: "12",
              // 电池的电量信息
              electricity: "80",
            },
            {
              // 电池的名称或编号
              batteryName: "4",
              // 电池的电流信息
              current: "0",
              // 电池的电压信息
              voltage: "541.0",
              // 电池的温度信息
              temperature: "12",
              // 电池的电量信息
              electricity: "80",
            },
            {
              // 电池的名称或编号
              batteryName: "5",
              // 电池的电流信息
              current: "0",
              // 电池的电压信息
              voltage: "541.0",
              // 电池的温度信息
              temperature: "12",
              // 电池的电量信息
              electricity: "80",
            },
            {
              // 电池的名称或编号
              batteryName: "6",
              // 电池的电流信息
              current: "0",
              // 电池的电压信息
              voltage: "541.0",
              // 电池的温度信息
              temperature: "12",
              // 电池的电量信息
              electricity: "80",
            },
            {
              // 电池的名称或编号
              batteryName: "7",
              // 电池的电流信息
              current: "0",
              // 电池的电压信息
              voltage: "541.0",
              // 电池的温度信息
              temperature: "12",
              // 电池的电量信息
              electricity: "80",
            },
            {
              // 电池的名称或编号
              batteryName: "8",
              // 电池的电流信息
              current: "0",
              // 电池的电压信息
              voltage: "541.0",
              // 电池的温度信息
              temperature: "12",
              // 电池的电量信息
              electricity: "80",
            },
            {
              // 电池的名称或编号
              batteryName: "9",
              // 电池的电流信息
              current: "0",
              // 电池的电压信息
              voltage: "541.0",
              // 电池的温度信息
              temperature: "12",
              // 电池的电量信息
              electricity: "80",
            },
            {
              // 电池的名称或编号
              batteryName: "10",
              // 电池的电流信息
              current: "0",
              // 电池的电压信息
              voltage: "541.0",
              // 电池的温度信息
              temperature: "12",
              // 电池的电量信息
              electricity: "80",
            },
            {
              // 电池的名称或编号
              batteryName: "11",
              // 电池的电流信息
              current: "0",
              // 电池的电压信息
              voltage: "541.0",
              // 电池的温度信息
              temperature: "12",
              // 电池的电量信息
              electricity: "80",
            },
            {
              // 电池的名称或编号
              batteryName: "12",
              // 电池的电流信息
              current: "0",
              // 电池的电压信息
              voltage: "541.0",
              // 电池的温度信息
              temperature: "12",
              // 电池的电量信息
              electricity: "80",
            },
          ],
        },
      ],
    };
  },
  methods: {
    seeDetail(item) {
      this.detailShow = true;
      this.title = item.name;
      this.detailData = [
        "SOC低报警",
        "BMS电源指示故障",
        "电池系统因故障停止运行",
      ];
    },
  },
};
</script>
<style lang="scss" scoped>
.powerSystem {
  width: 100%;
  height: 100%;
  .el-badge {
    display: block;
    width: 9px;
    height: 9px;
    margin-left: 3px;
    :deep(.el-badge__content) {
      width: 9px !important;
      height: 9px !important;
      border: none !important;
    }
  }

  .el-carousel {
    width: 100%;
    height: calc(100% - 16px);

    .Card-header {
      .flex {
        display: flex;
        align-items: center;
      }
    }
    .card-item {
      width:calc(100% - 200px);
      min-width: 534px;
      margin: auto;
      height: 100%;
    }
  }
  :deep(.powerSystemModal) {
    .el-dialog__title {
      font-family: Source Han Sans CN;
      font-weight: bold;
      font-size: 16px;
      color: #4981e6;
    }
    .el-dialog__body {
      height: 130px;
      padding: 0 20px;
      overflow-y: auto;
      /* 修改滚动条的整体样式 */
      &::-webkit-scrollbar {
        width: 6px; /* 设置滚动条宽度为0 */
      }

      /* 修改滚动条滑块的样式 */
      &::-webkit-scrollbar-thumb {
        background-color: transparent; /* 设置滑块背景颜色为透明 */
      }

      /* 鼠标悬停时滚动条滑块的样式 */
      &:hover::-webkit-scrollbar-thumb {
        background-color: #999; /* 设置鼠标悬停时滑块的背景颜色 */
        border-radius: 3px;
      }
    }
  }
}
::v-deep .el-carousel__container {

  margin: 0 auto;
  .Card-content {
    padding: 0;
  }
  .contentBox {
    width: 100%;

    .contentTop {
      width: 100%;
      height: 30px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      border-bottom: 1px dashed #e5e5e5;
      .item {
        display: flex;
        justify-content: center;
        align-items: center;
        .el-badge {
          margin-left: 0;
          margin-right: 3px;
        }
      }
    }

    .batterySystem {
      width: 100%;
      .systemHeader {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 16px;
        line-height: 1;
        overflow: hidden;
        box-sizing: border-box;
        .left {
          display: flex;
          align-items: center;
        }
        .item {
          display: flex;
          justify-content: center;
          align-items: center;
          font-family: Source Han Sans CN;
          font-weight: 500;
          font-size: 14px;
          color: #ffffff;
          &:not(:last-child) {
            margin-right: 32px;
          }
          .name {
            font-family: Source Han Sans CN;
            font-weight: bold;
            font-size: 14px;
            color: #ffffff;
          }
          .sosName {
            font-family: Source Han Sans CN;
            font-weight: 500;
            font-size: 14px;
            color: #b8b8b8;
            margin-right: 6px;
          }
          .el-progress {
            .el-progress-bar__outer {
              border: 1px solid #fff;
            }
            .el-progress-bar__innerText {
              display: none;
            }
          }
          .detail {
            font-family: Source Han Sans CN;
            font-weight: 500;
            font-size: 12px;
            color: #4981e6;
          }
        }
      }
      .batteryBox {
        width: 100%;
        padding: 0px 8px;
        box-sizing: border-box;
        display: flex;
        .batteryContent {
          display: flex;
          width: 100%;
          height: 246px;
          flex-grow: 1;
          overflow: hidden;
          overflow-y: auto;
          /* 修改滚动条的整体样式 */
          &::-webkit-scrollbar {
            width: 6px; /* 设置滚动条宽度为0 */
          }

          /* 修改滚动条滑块的样式 */
          &::-webkit-scrollbar-thumb {
            background-color: transparent; /* 设置滑块背景颜色为透明 */
          }

          /* 鼠标悬停时滚动条滑块的样式 */
          &:hover::-webkit-scrollbar-thumb {
            background-color: #999; /* 设置鼠标悬停时滑块的背景颜色 */
            border-radius: 3px;
          }
        }
        .batterys {
          width: calc(100% - 5px);
          height: auto;
          display: grid;
          justify-items: center;
          grid-template-columns: 1fr 1fr 1fr;
          position: relative;
          padding: 6px 0;
          margin-left: 6px;

          .item {
            width: 100%;
            box-sizing: border-box;
            padding: 8px 6px;
            box-shadow: 1px 0 0 0 #d2d2d2, 0 1px 0 0 #d2d2d2;
            margin-left: 1px;

            .itemHeader {
              width: 100%;
              display: flex;
              justify-content: center;
              align-items: center;
              .name {
                font-family: Source Han Sans CN;
                font-weight: bold;
                font-size: 14px;
                color: #e6e5e5;
              }
              .batterElectricity {
                position: relative;
                width: 52px;
                height: 23px;
                margin-left: 6px;
                &::before {
                  content: "";
                  position: absolute;
                  width: 100%;
                  height: 100%;
                  z-index: 2;
                  background: url("@/assets/newEnergyShip/dc.png") no-repeat
                    scroll 0 0/52px 23px;
                }

                .bg {
                  position: relative;
                  width: 43px;
                  height: 23px;
                  margin-left: 3px;
                  z-index: 1;
                  &.low {
                    background: url("@/assets/newEnergyShip/redBg.png")
                      no-repeat scroll 0 0/0 23px;
                  }
                  &.high {
                    background: url("@/assets/newEnergyShip/greenBg.png")
                      no-repeat scroll 0 0/0 23px;
                  }
                }
              }
            }
            .itemBody {
              width: 100%;
              display: grid;
              grid-template-columns: 1fr 1fr;
              grid-gap: 6px;
              margin-top: 9px;
              .itemContent {
                display: flex;
                flex-direction: column;
                align-items: center;
                .label {
                  font-family: Source Han Sans CN;
                  font-weight: 500;
                  font-size: 10px;
                  color: #e6e5e5;
                  opacity: 0.62;
                }
                .value {
                  font-family: DIN;
                  font-weight: bold;
                  font-size: 14px;
                  color: #ffffff;
                }
              }
            }
          }
        }
        .allBattery {
          width: 88px;
          height: 238px;
          padding: 6px;
          background: #3c3c3c;
          border-radius: 11px;
          border: 1px solid #282828;
          flex-shrink: 0;
          box-sizing: border-box;
          display: grid;
          grid-template-columns: 1fr;
          grid-gap: 6px;
          .item {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background: #242424;
            border-radius: 11px;
            flex-shrink: 0;
            .label {
              font-family: Source Han Sans CN;
              font-weight: 500;
              font-size: 10px;
              color: #e6e5e5;
              opacity: 0.62;
            }
            .value {
              font-family: DIN;
              font-weight: bold;
              font-size: 14px;
              color: #ffffff;
            }
          }
        }
      }
    }
  }
}
::v-deep .el-carousel__container {
	width: 100%;
	height: 100%;
}
::v-deep .el-carousel__indicators {
	display: none;
}
:deep(.el-carousel__arrow--left) {
	left: 31px;
	background-color: #fff !important;

	i {
		color: #4981e6;
		font-size: 18px;
	}
}
:deep(.el-carousel__arrow--right) {
	background-color: #fff !important;
	right: 31px;
	i {
		color: #4981e6;
		font-size: 18px;
	}
}
</style>
